<!-- 
@name: 首页
-->
<template>
	<div id="share" class="page">
		<img class="shareImg" object-fit="fill" :src="dataList.poster"></img>
		<div class="rule">
			<div>活动规则：</div>
			<!-- <div v-html="dataList.rule"></div> -->
			<pre style="margin:0">{{dataList.rule}}</pre>
			<!-- <div>1.好友必须是农商银行用户，否则无法完成注册;</div>
			<div>2.每成功邀请一位好友可获得积分奖励。</div> -->
		</div>
		<div class="flex-row flex-center">
			<van-button type="info" class="button1" @click="shareShow = true">邀请好友办理</van-button>
			<van-button type="info" class="button2" @click="goHandle">自己办理业务</van-button>

		</div>
	

		<van-overlay :show="shareShow">
			<div class="shareWrap flex-center flex-column" @click.stop='shareShow = false'>
				<img object-fit="fill" class="img1" :src='shareImg'></img>
				<div class="buttonWrap flex-center flex-row">
					<div class="flex-center flex-column" @click.stop="shareTipClick(true)" style="margin-right: 1.9rem;">
						<img object-fit="fill" class="img2 " src='@/assets/images/fxhy.png'></img>
						<div>分享给好友</div>
					</div>
					<div class="flex-center flex-column" @click.stop="downLoad_shareImg">
						<img object-fit="fill" class="img2" src='@/assets/images/bctp.png'></img>
						<div>保存图片</div>
					</div>

				</div>
			</div>
		</van-overlay>
    	<shareTip :show='shareTipShow' @shareTipHiden="shareTipClick(false)"></shareTip>
	</div>
</template>
<script>
import shareTip from '@/components/global/shareTip.vue';

export default {
	name: 'app',
	components: { shareTip },
	data() {
		return {
			dataList: {},
			shareTipShow: false,
			shareShow: false,
      shareImg:''
		};
	},

	created() {
		this.getBookModel_book();
		this.get_member();
		this.genPoster_book();
	},
	methods: {
		genPoster_book() {
			var params = {
				objPkey: this.$route.query.pkey,
			};
			// this.loadingShow = true;
			this.$myApi.genPoster_book(params).then((res) => {
				if (res.code == 0) {
					// this.loadingShow = false;
					this.shareImg = res.result;
				}
			});
		},
		shareTipClick(b) {
			if (b == true) {
				this.share();
			}
			this.shareTipShow = b;
		},
		getBookModel_book() {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.getBookModel_book(params).then((res) => {
				if (res.code == 0) {
					this.dataList = res.result;
					this.share();
				} else {
				}
			});
		},
		shareClick() {
			this.$notify({
				type: 'primary',
				message: '请点击右上角 通过发送给朋友邀请',
			});
		},
		share() {
			var link =
				this.$store.state.shareUrl +
				'/BankingBusiness/share?sharePkey=' +
				this.$store.state.userinfo.pkey +
				'&pkey=' +
				this.$route.query.pkey;
			var dataList = {
				title: this.dataList.name, // 分享标题
				desc: this.dataList.summary, // 分享描述
				imgUrl: this.dataList.photo, // 分享图标
			};
			this.updateAppMessageShareData(dataList, link);
		},
		goHandle() {
			//   if (this.dataList.url) {
			//     window.location.href = this.dataList.url;
			//   } else {}
			this.$dialog
				.confirm({
					title: '提示',
					message: this.dataList.tips,
				})
				.then(() => {
					console.log(this.userinfo.idcard);
					// if (this.userinfo.idcard) {
					// 	this.doBindBook_book();
					// } else {
					// 	}
					this.$router.push({
						path: '/BankingBusiness/handle',
						query: {
							pkey: this.$route.query.pkey,
							sharePkey: this.$route.query.sharePkey,
						},
					});
				})
				.catch(() => {
					// on cancel
				});
		},
    downLoad_shareImg() {
			this.$notify({ type: 'primary', message: '请长按图片保存本地' });
		},
		/**
		 * 预约办理银行业务(用户已绑定)
		 */
		doBindBook_book() {
			let params;
			params = {
				bookModelPkey: this.$route.query.pkey,
				referrer: this.$route.query.sharePkey,
			};

			this.$myApi.doBindBook_book(params).then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });
					this.$router.push('/BankingBusiness/list');
				}
			});
		},
		submit() {},
		//获取用户信息
		get_member() {
			var params = {};
			this.$myApi.get_member(params).then((res) => {
				if (res.code == 0) {
					this.$store.dispatch('SET_USERINFO', res.result);
					this.userinfo = res.result;
				} else {
				}
			});
		},
		goDetail(pkey) {
			// console.log()
			this.$router.push({
				path: '/BankingBusiness/share',
				query: { pkey: pkey },
			});
		},
		sortChange(pkey) {
			this.searchData.sortType = pkey;
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},
		onLoad() {
			console.log('触底');
			this.getData();
		},
		onClick() {
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},

		getData(finished) {
			// finished 避免清空列表出发刷新
			var params = this.searchData;
			params.gtype = this.activeName;
			this.$myApi.queryBookModel_book(params).then((res) => {
				if (res.code == 0) {
					this.likeList = [...this.likeList, ...res.result.content];
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						this.finished = false;
					}
					if (res.result.content.length < 5) {
						this.finished = true;
					}
				} else {
				}
			});
		},
		clearSearch() {
			this.likeList = [];
			this.searchData.page = 0;
			this.searchData.pagesize = 5;
			this.finished = false;
		},
		onSearch(e) {
			console.log(e);
			this.clearSearch();
			this.searchData.title = e;
			this.finished = true;
			this.getData(true);
		},
		onCancel() {},
	},
};
</script>
<style lang="less" scoped>
#share {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;

	padding-bottom: 0;
  .shareWrap {
		min-height: 100vh;
		min-width: 100vw;
		.img1 {
			width: 4.9rem;
			height: auto;
		}
		.buttonWrap {
			background: #fff;
			width: 7rem;
			border-radius: 10px;
			margin-top: 0.4rem;
			padding: 0.3rem 0;
			.img2 {
				width: 1rem;
				height: 1rem;
				margin-bottom: 0.1rem;
			}
		}
	}
	.rule {
		font-size: 0.24rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #16419f;
		line-height: 0.36rem;
		background: #478dff;
		padding: 0.23rem 0.49rem;
	}
	.button1 {
		border: none;
		background: #3d84ff;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
		width: 40%;
		margin: 0.4rem 0;
		font-size: 0.32rem;
		padding: 0.3rem 0;
		height: auto;
	}
	.button2 {
		font-size: 0.32rem;
		margin: 0.4rem 0;
		width: 40%;
		border: none;
		background: #ffce17;
		color: #000;
		padding: 0.3rem 0;
		height: auto;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
	}
	.shareImg {
		width: 100%;
		height: auto;
		display: block;
	}
}
</style>
<style lang="less" scoped>
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>